<template>
  <div>
    <!--上方搜索框-->
    <el-form :inline="true" :model="keyword" ref="keyword"   class="demo-form-inline">
<!--      <el-form-item label="id" prop="id">-->
<!--        <el-input size="small" clearable v-model="keyword.id" placeholder="站点id"></el-input>-->
<!--      </el-form-item>-->
      <el-form-item label="站点名称" prop="stationName">
        <el-input size="small" clearable v-model="keyword.stationName" placeholder="站点名称"></el-input>
      </el-form-item>
      <el-form-item label="站长用户名" prop="stationManagerUsername">
        <el-input size="small" clearable v-model="keyword.stationManagerUsername" placeholder="站长用户名"></el-input>
      </el-form-item>
      <el-form-item label="站长姓名" prop="stationManagerName">
        <el-input size="small" clearable v-model="keyword.stationManagerName" placeholder="站长姓名"></el-input>
      </el-form-item>
      <el-form-item label="手机号码" prop="phoneNumber">
        <el-input size="small" clearable v-model="keyword.phoneNumber" placeholder="手机号码"></el-input>
      </el-form-item>
      <el-form-item label="所在地" prop="location">
        <el-input size="small" clearable v-model="keyword.location" placeholder="所在地"></el-input>
      </el-form-item>
      <el-form-item label="建站时间" prop="createTime">
        <el-input size="small" clearable v-model="keyword.createTime" placeholder="建站时间"></el-input>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-input size="small" clearable v-model="keyword.status" placeholder="状态"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" size="small" @click="search" icon="el-icon-search">查询</el-button>
        <el-button type="primary" plain size="small" @click="resetSearchForm('keyword')"
                   icon="el-icon-refresh">
          重置
        </el-button>
      </el-form-item>
    </el-form>



    <!--中间表格区域-->
    <el-table v-loading="loading" :data="userManagementList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="站点ID" align="center" prop="id" />
      <el-table-column label="站点名称" align="center" prop="stationName" />
      <el-table-column label="站长用户名" align="center" prop="stationManagerUsername" />
      <el-table-column label="站长姓名" align="center" prop="stationManagerName" />
      <el-table-column label="手机号码" align="center" prop="phoneNumber" />
      <el-table-column label="所在地" align="center" prop="location" />
      <el-table-column label="配送员数量" align="center" prop="deliveryManCount" />
      <el-table-column label="建站时间" align="center" prop="createTime" />
      <el-table-column label="状态" align="center" prop="status" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改
          </el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="lock(scope.row)">锁定
          </el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="unlock(scope.row)">解锁
          </el-button>
        </template>
      </el-table-column>
    </el-table>

<!--下方分页区域-->
    <el-pagination @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="currentPage"
                   :page-sizes="[5, 10, 20]"
                   :page-size="100"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="total">
    </el-pagination>
<!--  隐藏弹框-->
    <el-dialog
      title="修改配送区域"
      :visible.sync="isCardVisible"
      width="60%"
    >
      <div class="station-info-container">
          <el-form :model="keyword" label-position="left">
            <el-form-item label="站点ID:">
              {{ keyword.id }}
            </el-form-item>
            <el-form-item label="站长用户名:">
              {{ keyword.stationManagerUsername }}
            </el-form-item>
            <el-form-item label="站长手机号:">
              {{ keyword.phoneNumber }}
            </el-form-item>
            <el-form-item label="站点所在地:">
              {{ keyword.location }}
            </el-form-item>
            <el-form-item label="站点名称:">
              <el-input v-model="keyword.stationName" :maxlength="60" />
            </el-form-item>
            <el-form-item label="站点详细地址:">
              <el-input v-model="keyword.address" :maxlength="200" />
            </el-form-item>
<!--            <el-form-item label="配送时段:">-->
<!--              <el-radio-group v-model="deliveryTimeType">-->
<!--                <el-radio label="allDay">全天配送</el-radio>-->
<!--                <el-radio label="custom">自定义时段</el-radio>-->
<!--              </el-radio-group>-->
<!--              <template v-if="deliveryTimeType === 'custom'">-->
<!--                <el-time-picker-->
<!--                    v-model="deliveryTimeSlots[0].start"-->
<!--                    placeholder="开始时间"-->
<!--                    value-format="HH:mm"-->
<!--                    :picker-options="{-->
<!--                  shortcuts: false-->
<!--                }"-->
<!--                    style="width: 120px;"-->
<!--                />-->
<!--                <el-time-picker-->
<!--                    v-model="deliveryTimeSlots[0].end"-->
<!--                    placeholder="结束时间"-->
<!--                    value-format="HH:mm"-->
<!--                    :picker-options="{-->
<!--                  shortcuts: false-->
<!--                }"-->
<!--                    style="width: 120px;"-->
<!--                />-->
<!--                <el-button-->
<!--                    type="text"-->
<!--                    size="mini"-->
<!--                    @click="addDeliveryTimeSlot"-->
<!--                    v-if="deliveryTimeSlots.length < 10"-->
<!--                >添加时段</el-button>-->
<!--                <el-button-->
<!--                    type="text"-->
<!--                    size="mini"-->
<!--                    @click="removeDeliveryTimeSlot(index)"-->
<!--                    v-for="(slot, index) in deliveryTimeSlots"-->
<!--                    :key="index"-->
<!--                    v-if="deliveryTimeSlots.length > 1"-->
<!--                >删除</el-button>-->
<!--              </template>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="配送区域:">-->
<!--              &lt;!&ndash; 这里假设用一个简单的颜色块表示配送区域，实际应用中可替换为地图组件等 &ndash;&gt;-->
<!--              <div class="delivery-area-mock" :style="{ background: deliveryAreaColor }"></div>-->
<!--              <el-button type="primary" @click="openDeliveryAreaDialog">修改配送区域</el-button>-->
<!--            </el-form-item>-->
          </el-form>
          <el-button type="primary" @click="saveStationInfo">保存</el-button>
          <el-button type="primary" @click="errorSaveStationInfo">取消</el-button>
        <!-- 配送区域修改弹框 -->
        <el-dialog
            title="修改配送区域"
            :visible.sync="deliveryAreaDialogVisible"
            width="60%"
        >
          <!-- 这里可根据实际需求放入地图组件等，目前用简单颜色块表示 -->
          <div class="delivery-area-mock-dialog" :style="{ background: deliveryAreaColor }"></div>
          <el-color-picker
              v-model="deliveryAreaColor"
              :predefine-colors="['#FF5722', '#4CAF50', '#2196F3', '#9C27B0']"
          />
          <div slot="footer" class="dialog-footer">
            <el-button @click="deliveryAreaDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="saveDeliveryArea">确定</el-button>
          </div>
        </el-dialog>
      </div>
    </el-dialog>

<!--    弹框-->
    <div class="account-operation-container">
      <!-- 第一个弹框：锁定账号 -->
      <el-dialog
          title="确定锁定该账号?"
          :visible.sync="lockDialogVisible"
          width="40%"
      >
        <p>站长账号被锁定后将无法处理配送订单，请慎重操作！</p>
        <el-form :model="keyword" label-position="left">
          <el-form-item label="锁定原因:">
            <el-select v-model="keyword.reason" placeholder="请选择原因">
              <el-option label="违反规定" value="violation"></el-option>
              <el-option label="异常操作" value="abnormal_operation"></el-option>
              <el-option label="其他" value="other"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="补充说明:">
            <el-input
                v-model="keyword.remark"
                type="textarea"
                :maxlength="200"
                placeholder="请输入补充说明"
            />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="lockDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="openUnlockDialog">确定</el-button>
        </div>
      </el-dialog>
      <!-- 第二个弹框：解锁账号 -->
      <el-dialog
          title="确定解锁该账号?"
          :visible.sync="unlockDialogVisible"
          width="40%"
      >
        <p>站长账号被解锁后将恢复可处理配送订单，请慎重操作！</p>
        <div slot="footer" class="dialog-footer">
          <el-button @click="unlockDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleUnlock">确定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getList ,updateSaveStationInfo} from '@/api/client/deliveryStation'
export default {
  name: "Unit",
  data() {
    return {
      lockDialogVisible: false, // 第一个弹框默认显示
      unlockDialogVisible: false,
      yincangtankuang:false,
      deliveryTimeType: 'allDay',
      deliveryTimeSlots: [
        {
          start: '00:00',
          end: '23:59'
        }
      ],
      deliveryAreaDialogVisible: false,
      deliveryAreaColor: '#4CAF50', // 假设初始配送区域颜色
      isCardVisible: false,// 控制卡片显示隐藏的变量
      // 遮罩层
      loading: true,
      // 单位表格数据
      userManagementList: [],
      // 存储主单位数据
      primaryUnitList: [],
      pageNum: 1,
      pageSize: 5,
      currentPage: 1,
      total: 0,
      keyword: {
        id:null,
        stationName: null,
        stationManagerUsername: null,
        stationManagerName: null,
        phoneNumber: null,
        location: null,
        deliveryManCount: null,
        createTime: null,
        status: null,
        password:null,
        address:null,
        deliveryTime:'2025-03-15 03:04:11',
        deliverArea:null,
        reason:null,
        remark: ''

      },
      ids: [],
      title: '',
      dialogFormVisible: false,

      unitMeasure: {
        measureCode: '',
        measureName: '',
        primaryFlag: 'Y',
        enableFlag: 'Y',
        remark: '',
        primaryId: null,
        measureId: null,
        changeRate: 1
      },
      unitMeasureRules: {
        measureCode: [
          { required: true, message: '单位编码不能为空', trigger: 'blur' },
        ],
        measureName: [
          { required: true, message: '单位名称不能为空', trigger: 'blur' },
        ],
        primaryFlag: [
          { required: true, message: '是否是主单位不能为空', trigger: 'blur' },
        ],
        enableFlag: [
          { required: true, message: '是否默认启用不能为空', trigger: 'blur' },
        ],
      },
      isShowPrimary: false
    }
  },
  methods: {
    openUnlockDialog() {
      // 这里可以添加锁定账号的逻辑（调用后端接口等），目前先简单处理
      console.log('锁定原因:', this.keyword.reason);
      console.log('补充说明:', this.keyword.remark);
      this.lockDialogVisible = false;
      this.unlockDialogVisible = true;
    },
    handleUnlock() {
      // 这里可以添加解锁账号的逻辑（调用后端接口等）
      console.log('执行解锁操作');
      this.unlockDialogVisible = false;
    },
    //todo 最后的：
    saveStationInfo() {
      // 这里可添加保存站点信息相关逻辑，比如调用后端接口
      console.log('保存的站点信息:', this.keyword);
      console.log('保存的配送时段:', this.deliveryTimeType === 'custom'? this.deliveryTimeSlots : '全天配送');
      console.log('保存的配送区域颜色:', this.deliveryAreaColor);
      updateSaveStationInfo(this.keyword).then(res=>{
        console.log("res", res);
        if(res == 200){
          this.$message({
            type: 'success',
            message: '修改成功!'
          });
        }
        this.isCardVisible = !this.isCardVisible;
        this.keyword = {};
        this.fetchData();
      })
    },
    errorSaveStationInfo(){
      this.isCardVisible = !this.isCardVisible;
      this.keyword = {};
    },
    toggleDeliveryAreaDialog() {
      this.deliveryAreaDialogVisible = !this.deliveryAreaDialogVisible;
    },
    toggleCardVisibility() {
      this.isCardVisible = !this.isCardVisible;
    },
    // 保存站点信息
    saveDeliveryArea() {
      // 这里可添加保存配送区域相关逻辑，比如调用后端接口
      this.deliveryAreaDialogVisible = false;

    },
    //添加时段下面的删除的：
    removeDeliveryTimeSlot(index) {
      if (this.deliveryTimeSlots.length > 1) {
        this.deliveryTimeSlots.splice(index, 1);
      }
    },
    openDeliveryAreaDialog() {
      this.deliveryAreaDialogVisible = true;
    },
    //添加时段里的
    addDeliveryTimeSlot() {
      this.deliveryTimeSlots.push({
        start: '00:00',
        end: '00:00'
      });
    },
    fetchData(){
      //分页 + 模糊查询 带到后端的参数
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        id: this.keyword.id,
        stationName: this.keyword.stationName,
        stationManagerUsername: this.keyword.stationManagerUsername,
        stationManagerName: this.keyword.stationManagerName,
        phoneNumber: this.keyword.phoneNumber,
        location: this.keyword.location,
        createTime: this.keyword.createTime,
        status: this.keyword.status
      }
      //axios.get(url, params).then(res => {}
      getList(params).then(res => {
        console.log("res", res)
        let pageInfo = res.data;//{total:100,dataList:[]}
        console.log("pageInfo", pageInfo)
        this.loading = false;//关闭遮罩层
        this.userManagementList = pageInfo.records;
        console.log("this.userManagementList", this.userManagementList)
        this.total = pageInfo.total;
      })
    },

    // 获取单位列表
    // 多选框选中数据
    handleSelectionChange(selectionRowArr) {
      this.ids = [];
      // console.log(selectionRowArr)
      for (let i = 0; i < selectionRowArr.length; i++) {
        this.ids.push(selectionRowArr[i].refundId)
      }
      // console.log("ids",this.ids)
    },
    // 修改计量单位
    handleUpdate(row) {
      this.keyword = row;
      this.isCardVisible = !this.isCardVisible;
    },
    lock(row){
      this.keyword = row;
      this.lockDialogVisible = !this.lockDialogVisible;
    },
    unlock(row){
      this.keyword = row;
    },
    // 根据id删除
    handleDelete(row) {
      // console.log(row.measureId)
      this.$confirm('是否确认删除单位编号为' + row.refundId + '的数据项？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = {
          refundId: row.refundId
        }
        delById(params).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.fetchData();
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    // 页面大小改变时触发
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchData()
    },
    // 当前页码改变时触发
    handleCurrentChange(val) {
      this.pageNum = val;
      this.fetchData()
    },
    // 模糊搜索
    search() {
      this.fetchData()
    },
    // 重置表单
    resetSearchForm(formName) {
      this.$refs[formName].resetFields();
      this.fetchData()
    },

  },
  created() {
    this.fetchData()
  }

}
</script>

<style >
.account-operation-container {
                         padding: 20px;
                       }

.dialog-footer {
            text-align: right;
          }

.text-count-tag {
                  margin-left: 5px;
                  background-color: #f0f4f8;
                  color: #606266;
                  padding: 2px 5px;
                  border-radius: 3px;
                }
</style>
